<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link type="text/css" rel="stylesheet" href="css/header.css" />
		<link type="text/css" rel="stylesheet" href="fontico/iconfont.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
			mui.plusReady(function() {
				plus.navigator.setStatusBarStyle("light");
				plus.navigator.setStatusBarBackground("#343efc");
			})
		</script>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav title">
			<h1 class="mui-title title-color" id="online_title">online</h1>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" tabindex="0">
				<span class="mui-icon iconfont icon-fire"></span>
				<span class="mui-tab-label">online</span>
			</a>
			<a class="mui-tab-item" tabindex="1">
				<span class="mui-icon iconfont icon-tongxunlu"></span>
				<span class="mui-tab-label">通讯录</span>
			</a>
			<a class="mui-tab-item" tabindex="2">
				<span class="mui-icon iconfont icon-pengyouquan1"></span>
				<span class="mui-tab-label">发现</span>
			</a>
			<a class="mui-tab-item" tabindex="3">
				<span class="mui-icon iconfont wo-de-red icon-wodered"></span>
				<span class="mui-tab-label">我</span>
			</a>
		</nav>

		<script type="text/javascript">
			var online = [{
					pageId: "z-chatlist.html",
					pageUrl: "z-chatlist.html"
				},
				{
					pageId: "z-contact.html",
					pageUrl: "z-contact.html"
				},
				{
					pageId: "z-discover.html",
					pageUrl: "z-discover.html"
				},
				{
					pageId: "z-me.html",
					pageUrl: "z-me.html"
				}
			];
			//子页面适应页面的样式
			var onlineStyle = {
				top: "44px",
				bottom: "50px"
			}
			mui.plusReady(function() {

				mui.back = function() {
					return false;
				}
				//对网络连接进行监听
				netChangeSwitch();

				//获取当前窗口的WebviewObject对象
				var indexWebview = plus.webview.currentWebview();
				//向当前的主页webview 追加子页的4张webview对象
				for (var i = 0; i < online.length; i++) {
					var onlinePage = plus.webview.create(online[i].pageUrl, online[i].pageId, onlineStyle);
					//隐藏webview窗口
					onlinePage.hide();
					indexWebview.append(onlinePage);
				}
				plus.webview.show(online[0].pageId);

				//批量绑定tap事件, 展示不同的页面
				mui(".mui-bar-tab").on('tap', '.mui-tab-item', function() {
					//获取id
					var tabindex = this.getAttribute("tabindex");
					plus.webview.show(online[tabindex].pageId, "fade-in", 200);
					//隐藏其他不需要的页面
					for (var i = 0; i < online.length; i++) {
						if (i != tabindex) {
							plus.webview.hide(online[i].pageId);
						}
					}

				})
				// 延时加载
				setTimeout("initData()", "1000");
			});
			

			// 监听网络状态更改
			function netChangeSwitch() {
				document.addEventListener("netchange", function() {
					// 网络状态获取和判断
					var connectionStatus = plus.networkinfo.getCurrentType();
					if (connectionStatus != 0 && connectionStatus != 1) {
						// 重新打开网络连接
						var online_title = document.getElementById("online_title");
						online_title.innerHTML = "<b>online</b>";
					} else {
						// 关闭网络连接
						var online_title = document.getElementById("online_title");
						online_title.innerHTML = "<b>online(未连接)</b>";
					}
				});
			}

			// 预加载
			function initData() {
				
				var z_chatlist = plus.webview.getWebviewById("z-chatlist.html");
				mui.fire(z_chatlist, "refresh");

				var z_me = plus.webview.getWebviewById("z-me.html");
				mui.fire(z_me, "refresh");
				
			}
		</script>
	</body>
</html>
